<template>
  <li class="menu-firstList">
    <a class="has-arrow toggle toggle-first">
      <img :src="INDEX_MENU_ICON_MAPPING[rootItem.uumsFunction.functionCode] || '/static/resources/img/menu/index/ddgl.png'">
      <label>{{rootItem.uumsFunction.functionName}}</label>
    </a>
    <ul @click.stop="showSub">
      <li 
      	v-if="dirHTMLData !== '' && showDir" 
      	v-for="(v,k) in dirHTMLData" 
      	:showLeaf="showLeaf[k]" 
      	:is="dirHTML"
      	:dirItem="v"
      	:rootItem="rootItem"
      	:uapMenuVos="uapMenuVos" 
      	:key="k"
      	:k="k">
      </li>
    </ul>
  </li>
</template>

<script>
  import {getFarther} from '../../utils/utils'
  import dirHTML from './dirHTML'
  import store from '../../store/store'
  import {mapState} from 'vuex'
    export default {
      name: "index-menu",
      props:['rootItem','uapMenuVos','showDir'],
      data(){
        return {
          dirHTML:dirHTML,
          dirHTMLData:'',
          active:false,
          showLeaf:[]
        }
      },
      store,
      computed:{
        ...mapState('menusStore',['INDEX_MENU_ICON_MAPPING'])
      },
      methods:{
        showSub(e){
          let dom = getFarther('menu-subList',e.target);
          if(dom.classList.contains('active')){
            dom.classList.remove('active')
          }else{
            let firstLi = document.querySelectorAll('#menu>.menu-firstList .menu-subList');
            for(let i = 0;i < firstLi.length;++i){
              firstLi[i].classList.remove('active');
            }
            dom.classList.add('active')
            this.showLeaf.splice(dom.k,1,true);
          }
        }
      },
      mounted(){
        if(this.uapMenuVos !== ''){
          this.dirHTMLData = [];
          for(let i = 0;i<this.uapMenuVos.length;++i){
            if(this.uapMenuVos[i].uumsFunction.parentFunction === this.rootItem.uumsFunction.functionCode){
              this.dirHTMLData.push(this.uapMenuVos[i]);
              this.showLeaf.push(false);
            }
          }
        }
      }
    }
</script>

<style>
  #menu .menu-firstList.active>ul>.menu-subList.active>ul{
    display: block;
  }
  #menu .menu-firstList>ul>.menu-subList>ul{
    display: none;
  }
</style>
